<template>
    <div>
        <div class="banner" @click="handleBannerClick">
            <img class="banner-img"
                 :src="this.bannerImg"
                 alt="">
            <div class="banner-info">
                <div class="banner-title">{{this.sightName}}</div>
                <div class="banner-number">
                    <span class="iconfont banner-icon">&#xeac4;</span><span>{{bannerImgs.length}}</span>
                </div>
            </div>
        </div>
        <fade-animation>
            <gallary :imgs="bannerImgs" v-show="showGallary" @close="handleGallaryClose"/>
        </fade-animation>
    </div>
</template>

<script>

    import Gallary from "@/components/gallary/Gallary";
    import FadeAnimation from "@/components/fade/FadeAnimation";

    export default {
        name: "DetailBanner",
        props: {
            sightName: String,
            bannerImg: String,
            bannerImgs: Array
        },
        data() {
            return {
                showGallary: false
            }
        },
        components: {
            Gallary,
            FadeAnimation
        },
        methods: {
            handleBannerClick() {
                this.showGallary = true;
            },
            handleGallaryClose() {
                this.showGallary = false;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .banner {
        overflow: hidden;
        height: 0;
        padding-bottom: 55%;
        position: relative;

        .banner-img {
            width: 100%;
        }

        .banner-info {
            display: flex;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            line-height: .6rem;
            color: #ffffff;
            background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

            .banner-title {
                flex: 1;
                font-size: .32rem;
                padding: 0 .2rem;
            }

            .banner-number {
                margin-top: .14rem;
                padding: 0 .4rem;
                line-height: .32rem;
                height: .32rem;
                border-radius: .2rem;
                background: rgba(0, 0, 0, .8);
                font-size: .24rem;

                .banner-icon {
                    font-size: .24rem;
                }
            }
        }
    }
</style>
